<template>
  <div>
    <!-- 父传子 -->
    <!-- 
      语法:
      1.在父组件中给子组件加属性(自定义属性,复合变量命名规则)
      2.在子组件中使用 props 接收
     -->
    <!-- <my-product title="超级好吃的口水鸡儿" price='38' info='鲜嫩可口,唇齿留香'></my-product>
    <my-product title="脆香手抓饼" price='8' info='鲜嫩可口,唇齿留香'></my-product>
    <my-product title="酸爽杂粮粉" price='18' info='鲜嫩可口,唇齿留香'></my-product> -->
    <MyProduct
      v-for="itme in list"
      :key="itme.id"
      :title=itme.proname
      :price=itme.proprice
      info='鲜嫩可口,唇齿留香'
    ></MyProduct>
  </div>
</template>

<script>
import MyProduct from "./components/MyProduct";
export default {
  components: { MyProduct },
  data() {
    return {
      list: [
        { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8 },
        { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2 },
        { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2 },
      ],
    };
  },
};
</script>

<style>
</style>